<template>
	<u-navbar title="表单列表" bgColor="#FBFBFF" :autoBack="true" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
		<template #right>
			<view class="navbar-submit" @click="submit">
				<text>提交</text>
			</view>
		</template>
	</u-navbar>
	<view class="baseForm">
		<u--form labelPosition="left" :model="umodel" :rules="rules" ref="uForm" labelWidth="160rpx" errorType="toast">
			<u-form-item label="物料号1">
				<!-- 条码录入 -->
				<scan-bar ref="scanBarRef" @code-scanned="getScanResult" class="scan-bar"></scan-bar>
			</u-form-item>
			<u-form-item label="物料号2">
				<!-- 条码录入 -->
				<scan-bar ref="scanBarRef2" @code-scanned="getScanResult2" class="scan-bar"></scan-bar>
			</u-form-item>
			<u-form-item label="物料名称" prop="name">
				<u--input v-model="umodel.name" placeholder="物料名称" clearable></u--input>
			</u-form-item>
			<u-form-item label="数量" prop="number">
				<u-number-box v-model="umodel.number" :min="1" integer></u-number-box>
			</u-form-item>
		</u--form>
		<!-- 搜索信息 -->
		<view class="search">
			<u-button text="重置" class="custom-style" @click="reset"></u-button>
			<u-button type="primary" text="添加" class="custom-style" :loading="addLoading" @click="addList"></u-button>
		</view>
		<u-line></u-line>
		<!-- 卡片显示 -->
		<view v-if="scanList.length" class="list">
			<text class="list-title">列表信息({{ scanList.length }})</text>
			<view class="card" v-for="item in scanList" :key="item.code">
				<view class="right">
					<view class="title">物料号：{{ item.code }}</view>
					<view class="body">
						{{ item.name || '暂无原因' }}
					</view>
				</view>
				<view class="left">
					<!-- <view class="enter">
						<u-icon name="arrow-right" color="#999" size="16px"></u-icon>
					</view> -->
					<view class="number">
						{{ item.number }}
					</view>
				</view>
			</view>
		</view>
		<view v-else>
			<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png"></u-empty>
		</view>
	</view>
	<u-back-top :scroll-top="scrollTop" top="200" mode="squery"></u-back-top>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue';
import { onPageScroll } from '@dcloudio/uni-app';
import ScanBar from '@/components/scan-bar/index.vue';
import { http } from '@/utils/http';

// 获取安全距离高度
const { safeAreaInsets } = uni.getSystemInfoSync();

// 监听页面到顶部距离
const scrollTop = ref(0)
onPageScroll((e)=>{
	scrollTop.value = e.scrollTop
})

// 表单数据定义
const umodel = reactive({
	code: '',
	name: '',
	number: 1
});

// 表单规则定义
const rules = ref({
	name: [
		{
			type: 'string',
			required: true,
			message: '请填写物料名称',
			trigger: ['change']
		},
		{
			type: 'string',
			max: 40,
			message: '物料名称不超过40个字符',
			trigger: ['change']
		}
	],
	number: {
		type: 'number',
		required: true,
		max: 20,
		message: '数量不能为空',
		trigger: ['change']
	}
});

// 定义列表数据
const scanList = ref([
	{
		code: 'asdcasdcasd',
		name: '器具名称-8555555',
		number: 565
	}
])

// 重置表单
const uForm = ref();
const scanBarRef = ref();
const scanBarRef2 = ref();
function reset () {
	uForm.value.resetFields();
	scanBarRef2.value.reset();
	scanBarRef.value.reset();
}

// 添加一条
const addLoading = ref(false);
function addList() {
	if (umodel.code) {
		uForm.value.validate().then((res) => {
			addLoading.value = true;
			// 模拟添加数据操作
			setTimeout(()=>{
				const obj = JSON.parse(JSON.stringify(umodel))
				scanList.value.push(obj)
				addLoading.value = false;
				uni.showToast({
					title: '添加成功',
				})
				reset()
			}, 1000)
		});
	} else {
		uni.showToast({
			title: '请先录入物料号',
			icon: 'none'
		})
	}
}

// 获取扫码结果
function getScanResult(code: string) {
	// 获取code码详细信息，并进行赋值
	umodel.code = code;
	umodel.name = code?`器具名称-${code}`:'';
}

// 获取扫码结果
function getScanResult2(code: string) {
	// 获取code码详细信息，并进行赋值
	umodel.code = code;
	umodel.name = code?`器具名称-${code}`:'';
}

// 表单提交
const submitLoading = ref(false);
function submit () {
	if (submitLoading.value === false) {
		submitLoading.value = true;
		uni.showLoading({
			title: '提交中···'
		})
		// 模拟提交成功操作
		setTimeout(()=>{
			uni.hideLoading();
			submitLoading.value = false;
			uni.showToast({
				title: '已成功'
			})
		}, 1000);
	}
}

// 跳转至详情页面
function jumpToDetail(id: string) {
	uni.navigateTo({
		url: `/pages/demo/formList/detail?id=${id}`
	});
}
</script>

<style lang="scss" scoped>
.baseForm {
	padding: $uni-page-padding;
	padding-bottom: 30px;
	margin: 50px 0 0 0;
	.u-form {
		margin-top: 5px;
		:deep(.u-form-item__body) {
			padding: 5px 0;
		}
		.u-input {
			border: 1px solid $uni-input-border-color;
		}
		.scan-bar {
			display: flex;
			flex: 1;
		}
	}
	.u-line {
		padding: 10px 0;
	}
	.search {
		display: flex;
		.custom-style {
			// width: 120px;
			margin: 10px 5px 5px;
			height: 36px;
			border-radius: 8px;
			&:nth-child(1) {
				flex: 1
			}
			&:nth-child(2) {
				flex: 3
			}
		}
	}
	.list {
		.list-title {
			line-height: 40px;
			font-size: 14px;
			color: rgba(0, 0, 0, 0.4);
		}
		.card {
			margin-top: 5px;
			margin-bottom: 10px;
			border-radius: 7px;
			display: flex;
			align-items: center;
			padding: 10px 0;
			transition: all 300ms ease;
			box-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
			.left {
				// flex-basis: 90rpx;
				padding-right: 10px;
				text-align: right;
				font-size: 13px;
				.enter {
					line-height: 20px;
					margin-bottom: 5px;
				}
				.number {
					font-size: 13px;
					line-height: 18px;
				}
				:deep(.u-icon--right) {
					flex-direction: row-reverse;
				}
			}
			.right {
				flex: 1;
				padding-left: 15px;
				.title {
					font-size: 15px;
					line-height: 20px;
					margin-bottom: 5px;
				}
				.body {
					color: rgba(0, 0, 0, 0.4);
					font-size: 13px;
					line-height: 18px;
				}
			}
		}
	}
}
</style>
